<template>
	<div id="now_play">
		<div class="now_box">
			<ul>
				<li v-for="i in all_img" @click="send_id(i.id)">
					<div class="film_item">
						<div class="film_img">
							<img :src="i.poster.origin"/>
						</div>
						<div class="film_info">
							<div class="film_name">
								<span>{{i.name}}</span>
								<span class="grade">{{i.grade}}</span>
							</div>
							<div class="film_title">{{i.intro}}</div>
							<div class="film_count">
								<span class="num_clolor">{{i.cinemaCount}}</span><span class="num">家影院上映</span>
								<span class="num_clolor">{{i.watchCount}}</span><span>人购票</span>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		created: function() {
			var that = this;
			axios.get('https://m.maizuo.com/v4/api/film/now-playing', {
					params: {
						count: that.page_num
					}
				})
				.then(function(res) {
					for(var i = 0; i < res.data.data.films.length; i++) {
						that.all_img.push(res.data.data.films[i])
					}
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		beforeMount:function(){
			this.$store.commit("toggleTitle","正在热映")
		},
		data: function() {
			return {
				page_num: 40,
				all_img:[],
			}
		},
		methods:{
			send_id:function(id){
				this.$router.push({
					path:"/film_info",
					query:{
						my_id:id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../scss/now_play.scss";
</style>
